<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://www.sencha.com/deploy/dev/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.sencha.com/deploy/dev/ext-all.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />
<script>

var textFieldEditor = new Ext.Editor({
	field: {
		xtype: 'textfield'
		,selectOnFocus: true	
	}
	,updateEl: true
	,autoSize: true
	,cancelOnEsc: true
	,completeOnEnter: true
	,listeners: {
		startedit: function(){
			
		}
		,complete: function(editor, value, startValue){
				
		}	
	}
});

var textAreaEditor = new Ext.Editor({
	field: {
		xtype: 'textarea'
		,grow: true
		,growMax: 200
	}
	,updateEl: true
	,autoSize: true
	,cancelOnEsc: true
	,listeners: {
		startedit: function(){
			
		}
		,complete: function(editor, value, startValue){
				
		}	
	}
});

function addPanelTitle(el){
	var child = Ext.DomHelper.createDom({
		tag: 'div'
		,cls: 'title'
		,html: '[ title ]'	
	});
	
	var cEl = el.appendChild(child);
	cEl.on('dblclick', function(){
		textFieldEditor.startEdit(this);	
	});
}

function addPanelContent(el){
	var child = Ext.DomHelper.createDom({
		tag: 'div'
		,cls: 'content'
		,html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere neque non quam fermentum pulvinar. Curabitur eu risus urna. Mauris tellus magna, commodo eleifend ullamcorper ac, imperdiet at elit.'	
	});
	
	var cEl = el.appendChild(child);
	cEl.on('dblclick', function(){
		textAreaEditor.startEdit(this);	
	});
}

Ext.onReady(function(){
	var tb = new Ext.Toolbar({
		renderTo: 'admin-tb'
		,defaults: {xtype: 'buttongroup'}
		,items: [
			{
				title: 'Panel'
				,columns: 2
				,defaults: {scale: 'large'}
				,items: [
					{
						text: 'title'
						,icon: 'icon-title.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'paneltitle'}	
									});
								});	
							}
						}
					},{
						text: 'Content'
						,icon: 'icon-content.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'panelcontent'}	
									});
								});	
							}
						}	
					}
				]
			},{
				title: 'Online Contact'
				,columns: 2
				,defaults: {scale: 'large'}
				,items: [
					{
						text: 'title'
						,icon: 'icon-ym.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'paneltitle'}	
									});
								});	
							}
						}
					},{
						text: 'Content'
						,icon: 'icon-skype.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'panelcontent'}	
									});
								});	
							}
						}	
					}
				]
			},{
				title: 'Widgets'
				,columns: 2
				,defaults: {scale: 'large'}
				,items: [
					{
						text: 'title'
						,icon: 'icon-ym.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'paneltitle'}	
									});
								});	
							}
						}
					},{
						text: 'Content'
						,icon: 'icon-skype.png'
						,listeners: {
							render: function(bt){
								bt.el.on('mousedown', function(e, html, option){
									var ds = new Ext.dd.DragSource(bt.el, {
										ddGroup: 'leftPanel'
										,dragData: {type: 'panelcontent'}	
									});
								});	
							}
						}	
					}
				]
			}
		]	
	});
	
	var dt1 = new Ext.dd.DropTarget('left-panel', {
		ddGroup:'leftPanel'
		,notifyDrop: function(ds, e, data){
			switch(data.type){
				case 'paneltitle':
					addPanelTitle(this.el);
					break;
					
				case 'panelcontent':
					addPanelContent(this.el);
					break;
			}
			
			return true;
		}
	});
	
	
	var dt2 = new Ext.dd.DropTarget('right-panel', {
		ddGroup:'rightPanel'
	});
	
	var webPage = new Ext.BoxComponent({
		boxMaxHeight: 300
		,autoScroll: true
		,applyTo: 'web-page'	
	});
});
</script>
</head>

<body>
<div id="admin-tb"></div>
<div id="web-page">
	<div id="header"></div>
    <div id="center">
    	<div id="left-panel"></div>
        <div id="content"></div>
        <div id="right-panel"></div>
        <div class="clearing"></div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>
